<template class="${classes}">
    <import from="./general-settings/general-settings"></import>
    <import from="./editor-options-settings/editor-options-settings"></import>
    <import from="./results-options-settings/results-options-settings"></import>
    <import from="./style-options-settings/style-options-settings"></import>
    <import from="./keyboard-shortcut-settings/keyboard-shortcut-settings"></import>
    <import from="./omnisharp-settings/omnisharp-settings"></import>
    <import from="./about/about"></import>

    <div class="window">
        <div class="flex-grow-height-restricted d-flex flex-column">
            <ul class="tabs nav nav-tabs mb-3">
                <li class="nav-item ${tab === selectedTab ? 'active' : ''}" repeat.for="tab of tabs">
                    <div class="nav-link" click.trigger="selectedTab = tab">${tab.text}</div>
                </li>
            </ul>

            <div class="flex-grow-height-restricted d-flex flex-column overflow-y-auto" switch.bind="selectedTab.route">
                <general-settings case="general"
                                  class="tab-content"
                                  settings.bind="editableSettings"></general-settings>
                <editor-options-settings case="editor"
                                         class="tab-content"
                                         settings.bind="editableSettings"></editor-options-settings>
                <results-options-settings case="results"
                                          class="tab-content"
                                          settings.bind="editableSettings"></results-options-settings>
                <style-options-settings case="style"
                                          class="tab-content"
                                          settings.bind="editableSettings"></style-options-settings>
                <keyboard-shortcut-settings case="keyboard-shortcuts"
                                            class="tab-content"
                                            settings.bind="editableSettings"></keyboard-shortcut-settings>
                <omnisharp-settings case="omnisharp"
                                    class="tab-content"
                                    settings.bind="editableSettings"></omnisharp-settings>
                <about case="about"
                       class="tab-content"
                       settings.bind="editableSettings"></about>
            </div>
        </div>

        <div class="bottom-buttons-bar">
            <div class="me-auto">
                <button class="btn btn-secondary"
                        click.trigger="showAppDataFolder()"
                        shells="!browser"
                        title="This is where NetPad stores local files.">
                    Open App Data Folder
                </button>
            </div>
            <div>
                <button class="btn btn-primary" click.trigger="apply()" disabled.bind="!canApply">Apply</button>
                <button class="btn btn-primary" click.trigger="save()" disabled.bind="!canApply">Save</button>
                <button class="btn-cancel btn btn-secondary" click.trigger="close()">Close</button>
            </div>
        </div>
    </div>
</template>
